<template>
	<view class="page">
		<uni-nav-bar :fixed="true" :status-bar="true" backgroundColor="#ECE6D5" @clickLeft="$pageBack()" left-icon="back" title="详情"></uni-nav-bar>
		<view class="content">
			<view class="take_item" v-if="dataInfo.createUser">
				<view class="take_user flex_jc_sb">
					<view class="u_l flex">
						<image v-if="dataInfo.createUser.img" :src="dataInfo.createUser.img" mode="aspectFill"></image>
						<image v-else src="https://www.daolangtongge.com/read-book-api/profile/mini_app/img/head.png" mode=""></image>
						<view class="flex_r">
							<view class="t1">{{ dataInfo.createUser.name }}</view>
							<view class="t2">{{ dataInfo.createTime }}</view>
						</view>
					</view>
					<view class="u_r flex_jc_cent" v-if="dataInfo.top == 1">
						<view class="flex">
							<image src="/static/tt.png" mode=""></image>
							<view class="">已置顶</view>
						</view>
					</view>
				</view>
				<view class="texts">
					<view class="title">{{ dataInfo.title }}</view>
					<view class="t_content">
						{{ dataInfo.content }}
					</view>
				</view>
				<view class="imglist" v-if="dataInfo.images.length != 0">
					<view class="img_item" v-for="(img, ind) in dataInfo.images" :key="ind" @click="$previewImage(dataInfo.images, index)">
						<image :src="img" mode="aspectFill"></image>
					</view>
				</view>
				<view class="hd" v-if="dataInfo.activity" @click="$pageGo(`/pages/activity/info?id=${dataInfo.activity.id}`)">
					<image src="/static/q.png" mode=""></image>
					{{ dataInfo.activity.name }}
				</view>
			</view>
		</view>
		<view class="pinglun">
			<view class="yb" v-if="dataInfo.caution == '1'">
				<image class="adsimg" src="/static/yb.png" mode=""></image>
				<view class="">
					<view class="ttt flex">
						<image src="/static/sx.png " mode=""></image>
						内容涉及心理创伤，请谨慎评论
					</view>
					<view class="ybtit">评论 {{ data.list.length }}</view>
				</view>
			</view>
			<view class="tit" v-else>评论 {{ data.list.length }}</view>
			<view class="kong" v-if="dataInfo.reply == 0">
				<image src="/static/k3.png" mode=""></image>
				<view class="text">作者未开启评论区</view>
			</view>
			<loadstatusVue v-else :status="data.loadStatus">
				<view class="p_items" v-for="(item, index) in data.list" :key="index">
					<view class="user">
						<view class="u_name flex">
							<image v-if="item.user.img" :src="item.user.img" mode="aspectFill"></image>
							<image v-else src="https://www.daolangtongge.com/read-book-api/profile/mini_app/img/head.png" mode="aspectFill"></image>
							<view class="">{{ item.user.name }}</view>
						</view>
						<view class="text">{{ item.content }}</view>
						<view class="comment" v-if="item.images">
							<view class="c_imglist">
								<view class="img_item" v-for="(img, ind) in item.images.split(',')" :key="ind" @click="$previewImage(item.images.split(','), ind)">
									<image :src="img" mode="aspectFill"></image>
								</view>
							</view>
						</view>
						<view class="times flex_jc_sb">
							<view class="time">{{ item.createTime }}</view>
							<view class="btn" @click="itemopen(item)">回复</view>
						</view>
					</view>
					<view v-if="item.replyList && item.replyList.length != 0" class="pp_text" @click="open(item)">
						<view class="comment" v-for="(ii, dd) in item.replyList.slice(0, 2)" :key="dd">
							<view class="ts" v-if="ii.receiveUser">
								<text>
									{{ ii.user.name }}
									<text class="tshf">回复</text>
									{{ ii.receiveUser.name }}：
								</text>
								{{ ii.content }}
							</view>
							<view class="ts" v-else>
								<text>{{ ii.user.name }}：</text>
								{{ ii.content }}
							</view>
							<view class="c_imglist" v-if="ii.images">
								<view class="img_item" v-for="(img, ind) in ii.images.split(',').slice(0, 4)" :key="ind">
									<image :src="img" mode="aspectFill"></image>
								</view>
							</view>
						</view>
						<view class="b_text" v-if="item.replyList && item.replyList.length > 2">查看全部评论</view>
					</view>
				</view>
			</loadstatusVue>
		</view>
		<bottom_input ref="bottomInputRef" @resetList="resetList"></bottom_input>
		<view class="btn_zw"></view>
		<view class="handle_block_bottom">
			<view class="handle_block flex_jc_sb">
				<view class="handle_l flex">
					<image src="/static/cc3.png" mode=""></image>
					<view class="input" @click="autofocus(dataInfo)">与人善言，暖于布帛</view>
				</view>
				<view class="handle_r flex">
					<view class="iss flex">
						<image v-if="dataInfo.selfLike" src="/static/zan_1.png" mode="" @click="changeIMG(dataInfo, 1)"></image>
						<image v-else src="/static/zan.png" mode="" @click="changeIMG(dataInfo, 1)"></image>
						<view class="ts" :class="{ hidden: !dataInfo.countLike }">{{ dataInfo.countLike }}</view>
					</view>
					<view class="iss flex">
						<image v-if="dataInfo.selfFlag" src="/static/xin_1.png" mode="" @click="changeIMG(dataInfo, 2)"></image>
						<image v-else src="/static/xin.png" mode="" @click="changeIMG(dataInfo, 2)"></image>
						<view class="ts" :class="{ hidden: !dataInfo.countFlag }">{{ dataInfo.countFlag }}</view>
					</view>
					<view class="iss">
						<image src="/static/zhuan.png" mode=""></image>
						<button class="zf_btns" open-type="share"></button>
					</view>
				</view>
			</view>
		</view>
		<pinglunPage ref="popupRef"></pinglunPage>
	</view>
</template>

<script setup>
import { ref, reactive, nextTick } from 'vue';
import { onLoad, onShow, onReachBottom, onPageScroll, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app';
import { communityInfo, articleList, articleReplyList, communityChangeLike } from '@/api/community.js';
import loadstatusVue from '@/components/loadstatus/loadstatus.vue';
import pinglunPage from '@/components/pinglun/pinglun.vue';
import { toast, showConfirm } from '@/utils/common.js';
// 所有数据都定义在 data 中
const data = reactive({
	list: [],
	loadStatus: 'before', // 加载状态
	hasMore: true, // 是否有更多数据
	isLoading: false, // 防止重复请求的锁
	queryParams: {
		id: undefined,
		pageNum: 1,
		pageSize: 10
	}
});
// 获取子组件实例
const bottomInputRef = ref(null);
// 点击触发的方法
const autofocus = (item) => {
	if (dataInfo.reply != 1) {
		toast('作者未开启评论');
		return;
	}
	if (dataInfo.self == 1) {
		toast('帖子已下架');
		return;
	}
	// 显示子组件
	bottomInputRef.value.open(item, 1);
};
// 回复某个人
const itemopen = (item) => {
	if (dataInfo.reply != 1) {
		toast('作者未开启评论');
		return;
	}
	if (dataInfo.self == 1) {
		toast('帖子已下架');
		return;
	}
	bottomInputRef.value.open(item, 2);
};
const popupRef = ref(null);
// 点击打开弹窗
const open = (item) => {
	popupRef.value.open(dataInfo, item);
};

// 主贴回复成功 直接在数组前方添加一条数据
const resetList = (item, type) => {
	//type 如果是2 那就是回复某个人
	if (type == 2) {
		let obj = data.list.filter((i) => i.id == item.replyId)[0];
		obj.replyList = obj.replyList || [];
		obj.replyList.push(item);
		return;
	}
	if (item && data.list.length != 0) {
		data.list.unshift(item);
	} else {
		getList();
	}
};

// 延迟函数
const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
// 设置加载状态的方法
const setLoadStatus = (status, options = {}) => {
	data.loadStatus = status;
};
// 处理响应数据的通用方法
const handleResponseData = async (res, isLoadMore = false) => {
	// 如果是加载更多，确保loading状态至少显示500ms，避免闪烁
	if (isLoadMore) {
		await delay(500);
	}
	if (res.code == 200) {
		// 处理数据
		if (isLoadMore) {
			data.list.push(...res.rows);
		} else {
			data.list = res.rows || [];
		}
		// 判断是否有更多数据
		data.hasMore = res.rows && res.rows.length >= data.queryParams.pageSize;
		// 设置状态
		if (data.list.length === 0) {
			setLoadStatus('empty');
		} else if (!data.hasMore) {
			setLoadStatus('noMore');
		} else {
			setLoadStatus('success');
		}
		return true;
	}
	return false;
};
// 获取列表数据
const getList = async (isLoadMore = false) => {
	// 防止重复请求
	if (data.isLoading) return;
	try {
		data.isLoading = true;
		if (isLoadMore) {
			if (!data.hasMore) return;
			setLoadStatus('loading');
		} else {
			setLoadStatus('before');
			// 初始加载时显示loading至少1秒，避免闪烁
			await delay(500);
		}
		const res = await articleList(data.queryParams);
		const success = await handleResponseData(res, isLoadMore);
		if (!success) {
			// 请求失败的处理
			setLoadStatus(data.list.length === 0 ? 'empty' : 'success');
		}
	} catch (err) {
		await delay(500);
		setLoadStatus(data.list.length === 0 ? 'empty' : 'success');
	} finally {
		data.isLoading = false;
	}
};

const UID = ref(0);
const inputType = ref('');
const dataInfo = reactive({});
const getInfo = () => {
	communityInfo({ id: UID.value }).then((res) => {
		if (res.code == 200) {
			if (res.data.images) {
				res.data.images = res.data.images.split(',');
			}
			Object.assign(dataInfo, res.data);
			if (inputType.value == 'input') {
				nextTick(() => {
					autofocus(res.data);
				});
			}
		}
	});
};
const changeIMG = (item, type) => {
	communityChangeLike({ id: item.id, type: type })
		.then((res) => {
			if (res.code == 200) {
				if (type == 1) {
					const wasLiked = item.selfLike;
					item.selfLike = !wasLiked;
					item.countLike += wasLiked ? -1 : 1;
					toast(wasLiked ? '取消点赞' : '已点赞');
				} else {
					const wasFlagged = item.selfFlag;
					item.selfFlag = !wasFlagged;
					item.countFlag += wasFlagged ? -1 : 1;
					toast(wasFlagged ? '取消收藏' : '已收藏');
				}
			}
		})
		.catch((error) => {
			console.error('操作失败:', error);
			toast('操作失败，请重试');
		});
};
onLoad((option) => {
	inputType.value = option.type;
	UID.value = option.id;
	getInfo();
	data.queryParams.id = option.id;
	getList();
});
// 上拉加载更多
onReachBottom(() => {
	if (data.hasMore && (data.loadStatus === 'success' || data.loadStatus === 'noMore') && !data.isLoading) {
		data.queryParams.pageNum++;
		getList(true);
	}
});
onShareAppMessage(() => {
	return {
		title: dataInfo.title,
		imageUrl: dataInfo.images[0] ? dataInfo.images[0] : '',
		path: `pages/community/info?id=${UID.value}`
	};
});
onShareTimeline(() => {
	return {
		title: dataInfo.title,
		imageUrl: dataInfo.images[0] ? dataInfo.images[0] : '',
		path: `pages/community/info?id=${UID.value}`
	};
});
</script>
<style lang="scss">
page {
	background: #fbfcf9;
}
.content {
	width: 100%;
	margin: 20rpx auto;
	position: relative;
	padding: 0rpx 20rpx;
	box-sizing: border-box;
	.take_item {
		width: 100%;
		background: #fff;
		border-radius: 20rpx;
		padding: 20rpx;
		box-sizing: border-box;
		margin: 20rpx auto;
		.take_user {
			.u_l {
				image {
					width: 60rpx;
					height: 60rpx;
					border-radius: 30rpx;
				}
				.flex_r {
					margin-left: 14rpx;
					.t1 {
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 24rpx;
						color: #000000;
					}
					.t2 {
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 20rpx;
						color: #8f8f8b;
					}
				}
			}
			.u_r {
				width: 124rpx;
				height: 44rpx;
				background: #ffffff;
				border-radius: 22rpx;
				border: 1px solid #b19561;
				image {
					width: 24rpx;
					height: 24rpx;
					margin-right: 4rpx;
				}
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #b19561;
			}
		}
		.texts {
			.title {
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 30rpx;
				color: #1b1b1b;
				margin-top: 20rpx;
			}
			.t_content {
				margin-top: 20rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #1b1b1b;
				white-space: pre-wrap;
			}
		}

		.imglist {
			margin-top: 20rpx;
			display: flex;
			flex-wrap: wrap;
			.img_item {
				width: 156rpx;
				height: 156rpx;
				margin-right: 15rpx;
				position: relative;
				margin-bottom: 15rpx;
				image {
					width: 156rpx;
					height: 156rpx;
					border-radius: 12rpx;
				}
			}
			.img_item:nth-child(4n) {
				margin-right: 0rpx;
			}
		}

		.hd {
			margin: 20rpx 0rpx;
			height: 52rpx;
			background: #eee8d8;
			border-radius: 80rpx 80rpx 80rpx 80rpx;
			padding: 0rpx 24rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #75613e;
			display: inline-block;
			line-height: 52rpx;
			image {
				width: 28rpx;
				height: 28rpx;
				margin-right: 10rpx;
				vertical-align: middle;
			}
		}
	}
}
.handle_block_bottom {
	width: 750rpx;
	min-height: 100rpx;
	background: #ffffff;
	box-shadow: 0rpx 1px 10rpx 0rpx rgba(0, 0, 0, 0.2);
	position: fixed;
	bottom: 0%;
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
	z-index: 2;
	.handle_block {
		height: 100rpx;
		padding: 14rpx 26rpx;
		box-sizing: border-box;
		image {
			width: 48rpx;
			height: 48rpx;
		}
		.handle_l {
			.input {
				margin-left: 16rpx;
				width: 300rpx;
				height: 72rpx;
				background: #f7f7f7;
				border-radius: 36rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #d1d1d6;
				line-height: 72rpx;
				text-align: center;
			}
		}
		.handle_r {
			.iss {
				position: relative;
				min-width: 90rpx;
				.zf_btns {
					width: 48rpx;
					height: 48rpx;
					position: absolute;
					top: 0%;
					right: 0%;
					opacity: 0;
				}
			}
			image {
				margin-left: 20rpx;
			}
			.ts {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #8d8d88;
				margin-left: 10rpx;
				&.hidden {
					visibility: hidden; /* 隐藏但保留空间 */
				}
			}
		}
	}
}
.pinglun {
	width: 710rpx;
	background: #ffffff;
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	box-sizing: border-box;
	margin: 20rpx auto;
	.yb {
		width: 710rpx;
		height: 160rpx;
		background: linear-gradient(180deg, #ffe8c0 0%, rgba(114, 105, 88, 0) 100%);
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		padding: 24rpx 20rpx 0rpx 20rpx;
		box-sizing: border-box;
		position: relative;
		.adsimg {
			width: 160rpx;
			height: 160rpx;
			position: absolute;
			right: 0%;
			top: 0%;
		}
		.ttt {
			image {
				width: 32rpx;
				height: 32rpx;
				margin-right: 6rpx;
			}
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #75613e;
		}
		.ybtit {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 28rpx;
			color: #1b1b1b;
			margin-top: 30rpx;
		}
	}
	.tit {
		padding: 20rpx 20rpx 0rpx 20rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 28rpx;
		color: #1b1b1b;
	}
	.p_items {
		padding: 0rpx 20rpx 20rpx 20rpx;
		box-sizing: border-box;
		width: 100%;
		.user {
			margin-top: 28rpx;
			.u_name {
				image {
					width: 40rpx;
					height: 40rpx;
					border-radius: 20rpx;
					margin-right: 20rpx;
				}
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #979797;
			}
			.text {
				margin-top: 20rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #1b1b1b;
			}
			.comment {
				.c_imglist {
					margin-top: 20rpx;
					display: flex;
					flex-wrap: wrap;
					.img_item {
						width: 148rpx;
						height: 148rpx;
						margin-right: 15rpx;
						margin-bottom: 15rpx;
						position: relative;
						image {
							width: 148rpx;
							height: 148rpx;
							border-radius: 12rpx;
						}
					}
				}
			}
			.comment:last-child {
				margin: 0rpx;
			}
			.times {
				margin-top: 20rpx;
				.time {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 20rpx;
					color: #979797;
				}
				.btn {
					width: 60rpx;
					height: 32rpx;
					background: #f7f7f7;
					border-radius: 16rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 20rpx;
					color: #979797;
					text-align: center;
					line-height: 32rpx;
				}
			}
		}
		// 评论的回复
		.pp_text {
			width: 670rpx;
			margin-top: 20rpx;
			background: #f7f7f7;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			padding: 18rpx 20rpx;
			box-sizing: border-box;
			.ts {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #1b1b1b;
				text {
					color: #979797;
				}
				.tshf {
					color: #75613e;
					margin: 0rpx 15rpx;
				}
			}
			.comment {
				margin-bottom: 20rpx;
				.c_imglist {
					margin-top: 20rpx;
					display: flex;
					.img_item {
						width: 148rpx;
						height: 148rpx;
						margin-right: 12rpx;
						position: relative;
						image {
							width: 148rpx;
							height: 148rpx;
							border-radius: 12rpx;
						}
					}
					.item_ads {
						width: 148rpx;
						height: 148rpx;
						position: absolute;
						top: 0%;
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						font-size: 28rpx;
						color: #ffffff;
						background: rgba(0, 0, 0, 0.5);
						border-radius: 12rpx;
					}
				}
			}
			.comment:last-child {
				margin: 0rpx;
			}
			.b_text {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #75613e;
				text-align: right;
			}
		}
	}
	.kong {
		width: 452rpx;
		margin: 128rpx auto;
		image {
			width: 452rpx;
			height: 184rpx;
		}
		.text {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #979797;
			margin-top: 50rpx;
			text-align: center;
		}
	}
}

.bottom_btn {
	width: 750rpx;
	min-height: 100rpx;
	background: #ffffff;
	box-shadow: 0rpx 1px 10rpx 0rpx rgba(0, 0, 0, 0.2);
	position: fixed;
	bottom: 0%;
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
	z-index: 2;

	.handle_l {
		height: 100rpx;
		padding: 14rpx 26rpx;
		box-sizing: border-box;
		image {
			width: 48rpx;
			height: 48rpx;
		}
		.input {
			margin-left: 16rpx;
			width: 630rpx;
			height: 72rpx;
			background: #f7f7f7;
			border-radius: 36rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #d1d1d6;
			line-height: 72rpx;
			text-align: center;
		}
	}
}
</style>
